<html lang="en">

<head>
    <meta charSet="utf-8">
    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
    <link rel="stylesheet" href="./ol/ol.css" type="text/css">
    <style>
        /* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
        .map {
            height: 700px;
            width: 100%;
            float: left;
        }

        .customerControl-parent {
            position: absolute;
        }

        .customer-panel {}
    </style>
    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
    <script src="./ol/ol.js"></script>
    <script src="./ol/jquery.js"></script>
    <title>OpenLayers example</title>
</head>

<body>
    <h2>OpenLayers Control</h2>
    <!--地图容器，需要指定 id -->
    <div id="map" class="map"></div>

    <script type="text/javascript">
      
        var map = new ol.Map({
            // 地图容器
            target: 'map',
            // 地图图层，比如底图、矢量图等
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM({
                        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
                    })
                })

            ],
            // 地图视野
            view: new ol.View({
          projection: "EPSG:4326",
          center: [116, 39],
          zoom: 14,
        }),
        });

        // 添加控件
        // function addControl() {

        //      initControl({
        //         html: "<div><img class='legend-img' οnclick='alert(\"点击图例\")' height='300px' " +
        //             "src='http://openlayers.vip/examples/resources/图例.png'></div>",
        //         map: map,
        //         //上下左右都可以传
        //         left: 5,
        //         bottom: 25,
        //     });
        // }

        // 创建控件容器div
        var baseMapSwitchDiv = document.createElement('div');
        var control;

       var opts =   {  html: "<div id='opt'  ><img class='legend-img'  height='300px' " +
                    "src='./ol/qqMusic.png'></div>",
                map: map,
                //上下左右都可以传
                left: 5,
                bottom: 25,}
         
        // 初始化容器
       function initControl(opt_options) {
         

            let options = opt_options || {};

            // 设置容器样式
            baseMapSwitchDiv.className = 'customerControl customerControl-parent';

            // 创建地图控件对象
            control = new ol.control.Control({ element: baseMapSwitchDiv });

            // 地图控件设置地图对象
            control.setMap(map);

            // 控件面板添加到地图控件中
            control.getMap() && addCustomerPanelToMap(options);

            // 设置控件容器位置（地图内部的绝对位置） ===============================================================
            $('#' + map.getTarget() + ' .customerControl-parent').css('position', 'absolute');
            options.left ? $('#' + map.getTarget() + ' .customerControl-parent').css('left', options.left) : "";
            options.top ? $('#' + map.getTarget() + ' .customerControl-parent').css('top', options.top) : "";
            options.right ? $('#' + map.getTarget() + ' .customerControl-parent').css('right', options.right) : "";
            options.bottom ? $('#' + map.getTarget() + ' .customerControl-parent').css('bottom', options.bottom) : "";
            // 设置控件容器位置（地图内部的绝对位置） ===============================================================

            // 如果没有设置  上下左右  位置，默认为左上（20，50）
            if (!options.left && !options.top && !options.right && !options.bottom) {
                $('#' + map.getTarget() + ' .customerControl-parent').css('left', 20);
                $('#' + map.getTarget() + ' .customerControl-parent').css('top', 50);
            }
            return opt_options
        }
        


        // 设置控件容器内容
        function addCustomerPanelToMap(options) {

            try {
                baseMapSwitchDiv.innerHTML = '<div class="customer-panel">\n' +
                    options.html
                    + '</div>';
            } catch (e) {
                console.log(e);
            }
        }
        var ops= this.initControl(opts)
      var div = ops.html

      var os =   {  html: "<div id='opt'  >12345</div>",
                map: map,
                //上下左右都可以传
                left: 5,
                bottom: 25,}
    this.initControl(os)
       console.log(div)
        /**
         *  todo 移除容器
         * @param _map
         */
        function remove() {
            control && map.removeControl(control);
            baseMapSwitchDiv && baseMapSwitchDiv.parentNode.removeChild(baseMapSwitchDiv);
        }
    </script>
    <button id="initControl" onClick="addControl()">添加控件</button>
    <button id="remove" onClick="remove()">关闭控件</button>
</body>

</html>